<template>
  <div class=" container-banner book-container">
    <div class=" bg-card book-container-header">
      <div class=" container-column gap-fourth">
        <div class=" container-w100 container-flex-end gap-fourth">
          <q-form-button
            type="button"
            class=" button-primary"
          >
            <div class=" container container-align-center">
              <q-icon
                icon="Trash"
                size="16px"
              />
              <span>删除所选</span>
            </div>
          </q-form-button>
          <q-form-button
            type="button"
            class=" button-primary"
          >
            <div class=" container container-align-center">
              <q-icon
                icon="Plus"
                size="16px"
              />
              <span>添加书籍</span>
            </div>
          </q-form-button>
        </div>
        <q-search
          class="container-flex-1"
          placeholder="搜索书名,作者等"
        />
      </div>
      <div class=" book-container-category">
        <span
          v-for="item in bookStore.categories"
          :key="item"
          class="book-container-category-item hover-primary mouse-cursor"
          :class="[
            {
              'active-primary':bookStore.currentCategory === item
            }
          ]"
          @click="bookStore.setCurrentCategory(item)"
        >
          {{ item }}
        </span>
      </div>
    </div>
    <div class=" bg-card">
      <QFormTable
        v-model:columns="columns"
        class="book-admin-table"
        :data="bookStore.getCategoryBook"
        :pagination="false"
        :selectable="true"
      >
        <template #cover="{value}">
          <QLazyImage
            :src="value"
            :alt="value"
            :width="72"
            :height="128"
          />
        </template>
        <template #description="{value}">
          <span class=" text-two-line mouse-cursor">{{ value }}</span>
        </template>
        <template #operation>
          <div class=" container-column gap-fourth">
            <QFormButton
              type="button"
              class=" button-primary"
            >
              <span class=" text-one-line">编辑信息</span>
            </QFormButton>
            <QFormButton
              type="button"
              class=" button-primary"
            >
              <span class=" text-one-line">编辑内容</span>
            </QFormButton>
          </div>
        </template>
        <template #tags="{value}">
          <p>
            {{ value.split(',').join(' ') }}
          </p>
        </template>
      </QFormTable>
      <QPagination
        class=" container-w100 container-wrap container-flex-end"
        :current-page="bookStore.currentPage"
        :total-pages="bookStore.getCategoryCount"
        :max-visible-pages="3"
        @change="(page)=>bookStore.setCurrentPage(page)"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import {QFormButton, QIcon, QFormTable, QSearch ,QLazyImage,QPagination, useShowLoading} from 'qyani-components';
import { useBookStore } from '../store';
import { onBeforeMount, watch } from 'vue';
import { columns } from '../store';
const bookStore = useBookStore();
onBeforeMount(()=>{
  bookStore.getBookCategory();
})
watch(
  ()=>bookStore.loading,
  (newValue) => {
    if(newValue){
      useShowLoading.show();
    }else{
      useShowLoading.hide();
    }
  }
)
</script>
<style lang="css" scoped>
</style>